<template>
	<view class="jf_container">
		<view class="date_box">
			<view class="date_change">
				<custom-year-month-selector ref="selector" :value="dateValue.value" @change="dateChange"></custom-year-month-selector>
			</view>
			<view class="apply_times">
				{{dateValue.value[1]}}月共有缴费记录{{jfList.length}}条
			</view>
		</view>
		<view class="apply_list" v-if="jfList.length>0">
			<view class="apply_item" v-for="(item, index) in jfList" :key="index">
				<custom-card :footer="true">
					<view class="apply_header">
						<view class="apply_type">
							<text>{{item.itemName}}</text>
						</view>
						<view class="apply_result">
							<text>￥{{item.amount}}</text>
						</view>
					</view>
					<view class="apply_date">
						{{item.gmtModify}}
					</view>
					<template v-slot:card-footer>
						<view class="card_footer" @click="jumpDetail(item)">
							<text>{{activeIndex == 1 ? '点击前往' : '详情'}}</text>
						</view>
					</template>
				</custom-card>
			</view>
			<view style="height: 50rpx;display: flex;justify-content: center;align-items: center;">
				<text class="scroll_time">没有更多数据啦~</text>
			</view>
		</view>
		<noContent v-else noContent="目前还没有当前月份缴费记录!"></noContent>
	</view>
</template>

<script>
	import {
		_showLoading,
		_showToast,
		dateFtt,
		mGetDate
	} from '../../common/js/util.js'
	import {findEmpByEmpId, paymentList, paymentList2} from '../../common/api/index.js'
	import noContent from '../../components/no-content.vue'
	export default {
		components:{
			noContent
		},
		onLoad:function(option){
			this.stuList = JSON.parse(option.stulist)
			this.billNo = option.clientBillNo
			let date = option.clientBillNo
			this.orgId = this.stuList[0].orgId
			this.empId = this.stuList[0].empId
			let value = date?JSON.parse(date):this.getDate().split('-');
			this.dateValue = {
				value,
				sAndeforTime: [dateFtt('yyyy-MM-dd', value[0] + '-' + value[1] + '-01')+' 00:00:00',dateFtt('yyyy-MM-dd', value[0] + '-' + value[1] + '-'+ mGetDate(value[0], value[1])) +' 23:59:59'],
			}
			// this._getFindEmpByEmpId()
			this._getPaymentList()
		},
		data() {
			return {
				walletObj: {},
				dateValue: {},
				orgId: '',
				empId: '',
				stuList: [],
				stuObj: {},
				jfList: []
		    }
		},
		onShow:function(){
		},
		methods: {
			dateChange(e) {
				this.dateValue = e
				this._getPaymentList()
			},
			_getFindEmpByEmpId() {
				findEmpByEmpId({
					orgId: this.orgId,
					empId: this.empId
				}).then(res => {
					if(res.code == 0) {
						this.stuObj = res.data
					} else {
						
					}
				}).catch(err => {
					console.log(err)
				})
			},
			_getPaymentList() {
				uni.showLoading({
					title: '加载中...'
				})
				this.jiaList = []
				// #ifdef H5
				paymentList({
					empId: this.empId,
					orgId: this.orgId,
					startTime: this.dateValue.sAndeforTime[0],
					endTime: this.dateValue.sAndeforTime[1],
					currentPage: 1,
					pageSize: 50
				}).then( res => {
					if(res.code == 0) {
						uni.hideLoading()
						this.jfList = res.data.list
					} else {
						uni.hideLoading()
					}
				}).catch(err=>{
					uni.hideLoading()
					console.log(err)
				})
				// #endif
				// #ifdef MP-ALIPAY
				paymentList( {
					empId: this.empId,
					orgId: this.orgId,
					startTime: this.dateValue.sAndeforTime[0],
					endTime: this.dateValue.sAndeforTime[1],
					currentPage: 1,
					pageSize: 10
				}).then( res => {
					if(res.code == 0) {
						uni.hideLoading()
						this.jfList = res.data.list
					} else {
						uni.hideLoading()
					}
				}).catch(err=>{
					uni.hideLoading()
					console.log(err)
				})
				// #endif
				// #ifdef MP-WEIXIN
				let data = []
				this.stuList.forEach((item)=>{
					data.push({
						...item,
						startTime: this.dateValue.sAndeforTime[0],
						endTime: this.dateValue.sAndeforTime[1],
						billNo: this.billNo,
						currentPage: 1,
						pageSize: 300
					})
				})
				paymentList2(data).then( res => {
					if(res.code == 0) {
						uni.hideLoading()
						this.jfList = res.data
					} else {
						uni.hideLoading()
					}
				}).catch(err=>{
					uni.hideLoading()
					console.log(err)
				})
				// #endif
				// #ifdef APP-PLUS
				paymentList( {
					empId: this.empId,
					orgId: this.orgId,
					startTime: this.dateValue.sAndeforTime[0],
					endTime: this.dateValue.sAndeforTime[1],
					currentPage: 1,
					pageSize: 10
				}).then( res => {
					if(res.code == 0) {
						uni.hideLoading()
						this.jfList = res.data.list
					} else {
						uni.hideLoading()
					}
				}).catch(err=>{
					uni.hideLoading()
					console.log(err)
				})
				// #endif
			},
			jumpDetail(obj) {
				uni.navigateTo({
					url: './detail?obj=' + encodeURIComponent(JSON.stringify(obj))
				})
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    month = month > 9 ? month : '0' + month;;
			    return `${year}-${month}`;
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100vh;
		background-color: #f6f6f6;
		font-family: PingFang-SC-Heavy, PingFang-SC;
	}
	.content{
		height: 100%;
		padding-bottom: 150rpx;
		box-sizing: border-box;
		overflow-y: auto;
	}
	
	.date_box{
		padding: 32rpx;
	}
	.date_chang{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-size: 30rpx;
		font-weight: 800;
		color: #3C424F;
		line-height: 42rpx;
	}
	.down_icon{
		width: 48rpx;
		height: 48rpx;
	}
	.apply_times{
		margin-top: 16rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #6B707A;
		line-height: 40rpx;
	}
	
	.apply_list{
		padding: 0 32rpx;
	}
	.apply_item{
		margin-bottom: 20rpx;
	}
	.card_footer{
		font-size: 28rpx;
		font-weight: 500;
		text-align: center;
		color: #185AFF;
	}
	.apply_header{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}
	.apply_type{
		font-size: 32rpx;
		font-weight: 600;
		color: #3C424F;
		line-height: 44rpx;
	}
	.apply_result{
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 32rpx;
		font-weight: 600;
		color: #FA6400;
		line-height: 40rpx;
	}
	.result_icon{
		width: 36rpx;
		height: 36rpx;
		margin-right: 12rpx;
	}
	.apply_start_and{
		font-size: 28rpx;
		font-weight: 600;
		color: #6B707A;
		line-height: 40rpx;
		padding: 20rpx 0 30rpx;
	}
	.apply_date{
		font-size: 24rpx;
		font-weight: 500;
		color: #9AA2B2;
		line-height: 34rpx;
		padding: 24rpx 0;
	}
	
	.scroll_time {
		font-family: 'Arial Normal', 'Arial';
		font-weight: 400;
		font-size: 24rpx;
		color: #AAAAAA;
	}
	.stu_item_txt {
		font-family: 'Arial Normal', 'Arial';
		font-weight: 400;
		font-size: 26rpx;
		color: #3A7AC7;
	}
</style>
